/*
 * @Author: xiaosihan 
 * @Date: 2024-09-26 20:37:55 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-26 21:11:13
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./rightMenu.module.less";
import partCollaborateStore from "../../partCollaborateStore";
import clsx from "clsx";
import { isEmpty, last } from "lodash";

interface Iprops {
    children?: ReactNode
}

// 右键菜单
export default function RightMenu() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [showRightMenu, setShowRightMenu] = useState(partCollaborateStore.showRightMenu);
    const [showSingleObject, setShowSingleObject] = useState(partCollaborateStore.showSingleObject);
    const [activeId, setActiveId] = useState(partCollaborateStore.activeId);
    const [hideLable, setHideLable] = useState(partCollaborateStore.hideLable);
    const [hideIds, setHideIds] = useState(partCollaborateStore.hideIds);
    const [transparent, setTransparent] = useState(partCollaborateStore.transparent);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setTransparent(partCollaborateStore.transparent);
        setHideIds(partCollaborateStore.hideIds);
        setHideLable(partCollaborateStore.hideLable);
        setShowRightMenu(partCollaborateStore.showRightMenu);
        setShowSingleObject(partCollaborateStore.showSingleObject);
        setActiveId(partCollaborateStore.activeId);
        const { x, y } = partCollaborateStore.rightMenuPosition;
        if (dom.current) {
            Object.assign(dom.current.style, {
                left: `${x}px`,
                top: `${y}px`,
            })
        }
    }, { delay: 10 }), []);

    const id = last(activeId) || "";

    return (
        <div
            ref={dom}
            className={clsx(styles.rightMenu, showRightMenu && styles.show)}
        >
            {
               (showSingleObject || !isEmpty(hideLable)) &&
                <div
                    className={styles.menu_item}
                    onClick={() => {
                        partCollaborateStore.setShowSingleObject(false);
                        partCollaborateStore.setShowRightMenu(false);
                        partCollaborateStore.setHideId([]);
                    }}
                >全部显示</div>
            }
            {
                !showSingleObject && (!isEmpty(activeId) && 
                     <div
                        className={styles.menu_item}
                        onClick={() => {
                            partCollaborateStore.setShowSingleObject(true);
                            partCollaborateStore.setShowRightMenu(false);
                            
                        }}
                    >单独显示</div>)
            }
                <div 
                className={styles.menu_item} 
                onClick={() => {
                    partCollaborateStore.setTransparent(!transparent);
                    partCollaborateStore.setShowRightMenu(false);
                }}
                >{ transparent ? "恢复透明度":"透明显示" }</div>
            {
              !hideIds.includes(id) &&  !isEmpty(activeId) &&
                <div 
                    className={styles.menu_item}
                    onClick={() => {
                        if(id){
                            partCollaborateStore.addHideId(id);
                            partCollaborateStore.setShowRightMenu(false);
                        }
                    }}
                >隐藏该组件</div>
            }
            <div 
                className={styles.menu_item} 
                onClick={() => {
                    partCollaborateStore.restoreAll();
                }}
            >恢复所有</div>
            <div className={styles.menu_item} 
            onClick={()=>{
                partCollaborateStore.setHideLable(!hideLable);
                partCollaborateStore.setShowRightMenu(false);
                hideLable
            }}>{hideLable ?"显示标点":"隐藏标点" }</div>
        </div>
    );

}